<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .big {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }

        .big .small {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div>

    <input type="text" placeholder="请输入">
    <input type="range">

    <script>
        var box = document.querySelector(".big");
        // console.dir(box);// 初始化时  box.onclick = null

        // 绑定事件 点击
        // box.onclick = function(){
        //     console.log("click");
        //     // 解绑事件
        //     box.onclick = null;
        // }

        // 按下
        // box.onmousedown = function () {
        //     console.log("mousedown");
        // }

        // 移动
        // box.onmousemove = function () {
        //     console.log("mousemove");
        // }

        // 松开
        // box.onmouseup = function () {
        //     console.log("mouseup");
        // }

        // 移入(推荐)
        // box.onmouseenter = function () {
        //     console.log("mouseenter");
        // }
        // 移开
        // box.onmouseleave = function(){
        //     console.log("mouseleave");
        // }

        // 悬停 (在子元素上发行为,会触发事件)
        // box.onmouseover = function(){
        //     console.log("mouseover");
        // }

        // 移出 (在子元素上发行为,会触发事件)
        // box.onmouseout = function(){
        //     console.log("mouseout");
        // }


        // 键盘事件
        // 该事件不是给普通dom对象绑定
        // box.onkeydown = function(){
        //     console.log("keydown");
        // }
        // 文档对象 (页面)
        // 按下键盘按键
        // document.onkeydown = function(){
        //     console.log("keydown");
        // }
        // 长按键盘按键
        // document.onkeypress = function(){
        //     console.log("keypress");
        // }
        // 松开键盘按键
        // document.onkeyup = function(){
        //     console.log("keyup");
        // }

        // input标签
        // document.querySelector("input").onkeydown = function(){
        //     console.log("触发keydown事件");
        // }


        // 表单事件
        // var inp = document.querySelector("input[type='text']");
        // var ran = document.querySelector("input[type='range']");

        // inp.onfocus = function(){
        //     console.log("获取焦点事件");
        // }
        // inp.onblur = function(){
        //     console.log("失去焦点事件");
        // }
        // inp.oninput = function(){
        //     console.log("监听输入的值事件");
        // }
        // ran.onchange = function(){
        //     console.log("值变化了触发事件");
        // }

        // 窗口事件
        // window.onresize = function(){
        //     console.log("窗口大小发生变化触发事件");
        // }

    </script>
</body>

</html>